<template>
  <div id="time">
    <div class="left">
      <div class="operator">
        <span class="curyear">{{Number(curYear)}}</span>
        <button class="rightOper" @click = "getNextYear" v-show="show1"> > </button>
        <button class="leftOper" @click = "getPreYear" v-show="show2"> < </button>  
      </div>
      <div id="year" style="width: 600px;height:400px;"></div>
    </div>
    <div class="right">
      <ul id="timeline" v-for="(item, index) in fullData" 
        :key= index> 
        <div v-if="item.count > 0">
          <h1>{{index + 1}}月</h1>
          <li class="view" 
            v-for="(item2, index2) in item.data" 
            :key="index2"
            >
            <a :href="'/home/blogDetail?id='+item2.id">
              <div class="box" :style="{'background-color':colors[index]}">
                <h4>{{item2.title}}</h4>
                <p>提交于 {{item2.createTime | time}}</p>
              </div> 
            </a>
          </li>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  data(){
    return{
      show1:true,
      show2:true,
      curYear:'', //当前年
      minyear:'',//最小年
      maxyear:'',//最大年
      yearOptions:{ //图表的选项
        xAxis: {
          data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
        },
        yAxis: {},
        series: {
          type: 'bar',
          itemStyle:{
            normal:{
              color:function(params){
                var colors = ['#e7dbca','#c490a0','#f1ccb8','#f1f1b8',
                  '#d9b8f1','#f1b8f1','#b8f1ed','#b8f1cc','#f3d751',
                  '#f1707d','#b8d38f','#e49f5e']
                return colors[params.dataIndex]
              }
            }
          }
        }       
      }, 
      fullData:[], //所有数据  
      colors:['#e7dbca','#c490a0','#f1ccb8','#f1f1b8',
        '#d9b8f1','#f1b8f1','#b8f1ed','#b8f1cc','#f3d751',
        '#f1707d','#b8d38f','#e49f5e'], 
    }  
  },
  created(){
  },
  mounted(){
    var date=new Date;
    this.curYear = date.getFullYear(); 
    this.maxyear = date.getFullYear(); 
    //获取最小年
    this.getminyear().then(minyear =>{
      this.minyear = minyear
      //初始化左右箭头
      if(this.curYear == this.minyear){
        this.show2 = false
      }else if(this.curYear == this.maxyear){
        this.show1 = false
      }else{
        this.show1 = true //增
        this.show2 = true //减
      }      
    })
    this.initTable(this.curYear)
  },
  watch:{
    curYear:function(val){
      if(val == this.minyear){
        this.show2 = false
      }else if(val == this.maxyear){
        this.show1 = false
      }else{
        this.show1 = true //增
        this.show2 = true //减
      }
    }
  },
  methods:{
    //获取最小年
    async getminyear(){
      const {data:res} = await this.$http.get('/blog/blogs/minYear')
      // this.minyear = res.minyear
      return res.minyear
    },
    async getYearDate(year){ //获取year中12个月的数据
      let temp = []
      for(let i = 1; i <= 12; i++){
        const {data:res} = await this.$http.get('/blog/blogs/time/info',{
          params:{
            year:year,
            month:i
          }
        })
        temp.push(res)     
      }
      return temp
    },
    async initTable(year){ //渲染表格
      var myChart = this.echarts.init(document.getElementById('year'), 'light') 
      this.fullData =  await this.getYearDate(year)
      //根据当前year获取图标的数据
      let counts = []
      for(let i = 0; i < 12; i++){
        counts.push(this.fullData[i].count)
      }
      this.yearOptions.series.data = counts
      myChart.setOption(this.yearOptions);
    },
    getPreYear(){
      this.curYear = this.curYear - 1
      this.initTable(this.curYear)
    },
    getNextYear(){
      this.curYear = this.curYear + 1
      this.initTable(this.curYear)
    }
    
  }
}
</script>

<style scoped>
  #time{
    margin-top:30px;
  }
  #timeline{
    width:80%;
    box-sizing:border-box;
  }
  #timeline li{
    width:50%;
    height:150px;
    position:relative;
    box-sizing:border-box;
    border-right:4px solid #eee;
    margin-top:-10px;
  }
  #timeline li:after{
    content:'';
    width:20px;
    height:20px;
    position:absolute;
    bottom:-10px;
    right:-12px;
    background-color:#ccc;
    border-radius:50%;
    z-index:5;
  }
  #timeline li:nth-child(even) .box{
    width:300px;
    height:100px;
    position:absolute;
    left:100%;
    top:50%;
    transform:translate(30px,-50%)
  }
  #timeline li:nth-child(odd) .box{
    height:100px;
    width:300px;
    position:absolute;
    right:0;
    top:50%;
    transform:translate(-30px,-50%)
  }
  #timeline li .box{
    padding-left:15px;
    color:white;
    border-radius:10px;
  }
  h4{
    max-width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .left{
    float: left;
    width:600px;
  }
  .right{
    padding-left:650px;
  }
  .operator{
    height:50px;
    width:600px;
    line-height:50px;
    position:relative;
  }
  .operator span{
    font-size:18px;
  }
  .curyear{
    display:inline-block;
    width:100px;
    height:50px;
    margin-left:25px;
  }
  .leftOper{
    float:right;
    /* margin-right:60px; */
    cursor: pointer;
    position:absolute;
    right:130px;
    margin-top:15px;
  }
  .rightOper{
    float:right;
    /* margin-right:40px; */
    cursor: pointer;
    margin-top:15px;
    position:absolute;
    right:60px;
  }
</style>
